import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Table, Button, Pagination, Dialog } from '@alifd/next';
import IceContainer from '@icedesign/container';
import '@alifd/next/dist/next.css';

const STATUS = {
  '1': '#3daf14',
  '-1': '#ef6f6e',
  '0': '#5584ff'
};

class OrderTable extends PureComponent {
  // 交易状态样式函数
  renderStatus = (checkedStatus) => {
    return (
      <div style={styles.status}>
        <span style={{ ...styles.dot, background: STATUS[checkedStatus] }} />
        {checkedStatus === 1 ? '完成' : checkedStatus === 0 ? '进行中' : '取消'}
      </div>
    );
  }

  render() {
    const { orderData, isLoading, current, dialogData, dialogVisible } = this.props;
    return (
      <IceContainer title="作品列表">
        <Table loading={isLoading} dataSource={orderData}>
          <Table.Column title="交易编号"  dataIndex="id" width={150} />
          <Table.Column title="交易类型" dataIndex="type" width={150} />
          <Table.Column title="交易买方" dataIndex="buyerId" width={150} />
          <Table.Column title="交易卖方" dataIndex="sellerId" width={150} />
          <Table.Column 
            title="交易状态"  
            dataIndex="status" 
            width={50}
            cell={this.renderStatus}
          />
          <Table.Column
            title="操作"
            width={50}
            cell={(item, index, record) => {
              return (
                <Button onClick={() => this.props.onOpen(record)} type="primary">
                  查看详情
                </Button>
              )
            }}
          />
        </Table>
        <Pagination 
          style={styles.pagination}
          current={current}
          onChange={this.handlePaginationChange}
        />
        <Dialog
          title={"您正在查看第"+dialogData.id+"号订单交易详情"}
          visible={dialogVisible}
          onOk={this.props.onClose}
          onClose={this.props.onClose}
          onCancel={this.props.onClose}
        >
          <IceContainer>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>交易编号</div>
              <div style={styles.infoDetail}>{dialogData.id}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>交易类型</div>
              <div style={styles.infoDetail}>{dialogData.type}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>交易生成时间</div>
              <div style={styles.infoDetail}>{dialogData.createTime}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>交易金额</div>
              <div style={styles.infoDetail}>{dialogData.orderMoney}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>支付类型</div>
              <div style={styles.infoDetail}>{dialogData.moneyType}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>交易信息</div>
              <div style={styles.infoDetail}>{dialogData.orderInfo}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>买方编号</div>
              <div style={styles.infoDetail}>{dialogData.buyerId}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>卖方编号</div>
              <div style={styles.infoDetail}>{dialogData.sellerId}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>交易状态</div>
              <div style={styles.infoDetail}>{dialogData.status === 1 ? '完成' : dialogData.status === 0 ? '进行中' : '取消'}</div>
            </div>
          </IceContainer>
        </Dialog>
      </IceContainer>
    );
  }

  // 从后台获取数据 Get http://localhost:9080/order/all?start=0&length=10
  componentDidMount() {
    this.props.getOrderData();
  }
}

const styles = {
  status: {
    position: 'relative',
    paddingLeft: '20px',
  },
  dot: {
    width: '10px',
    height: '10px',
    position: 'absolute',
    left: '0',
    top: '2px',
    borderRadius: '50%',
  },
  largeWidth: {
    width: '80px',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'right',
  },
  infoRow: {
    padding: '16px 0',
    display: 'flex',
    borderBottom: '1px solid #f6f6f6',
  },
  infoLabel: {
    flex: '0 0 100px',
    color: '#999',
  },
  infoDetail: {
    width: '400px',
    height: 'auto',
  },
};

const mapState = (state) => ({
  current: state.Order.get('current'),
  isLoading: state.Order.get('isLoading'),
  orderData: state.Order.get('orderData').toJS(),
  dialogVisible: state.Order.get('dialogVisible'),
  dialogData: state.Order.get('dialogData').toJS()
});

const mapDispatch = (dispatch) => ({
  getOrderData() {
    dispatch(actionCreators.getOrderData());
  },
  onOpen(record) {
    dispatch(actionCreators.onOpen(record));
  },
  onClose() {
    dispatch(actionCreators.onClose());
  }
});

export default connect(mapState, mapDispatch)(OrderTable);